<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="author" content="ThemeFuse">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>币乎点赞榜</title>

<!-- main JS libs -->
<script src="js/libs/modernizr.min.js"></script>
<script src="js/libs/jquery-1.10.0.js"></script>
<script src="js/libs/jquery-ui.min.js"></script>
<script src="js/libs/bootstrap.min.js"></script>

<!-- Style CSS -->
<link href="css/bootstrap.css" media="screen" rel="stylesheet">
<link href="style.css" media="screen" rel="stylesheet">

<!-- scripts -->
<script src="js/general.js"></script>

<!-- custom input -->
<script src="js/jquery.customInput.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- Placeholders -->
<script type="text/javascript" src="js/jquery.powerful-placeholder.min.js"></script>
<!-- Progress Bars -->
<script src="js/progressbar.js"></script>
<!-- Calendar -->
<link href="css/jquery-ui-1.8.20.custom.css" rel="stylesheet">

<script src="js/jquery-ui.multidatespicker.js"></script>
<script type="text/javascript">

resp = $.ajax({"url":"http://p4wd2uprn.bkt.clouddn.com/top10-upvote.json", async: false});
data = resp.responseJSON;
</script>
</head>

<body>

<div class="container container-wide">

<!-- content -->
<div class="content " role="main">
<!-- row -->
<div class="row">
<div class="col-sm-8">
<!-- Website Menu -->

<div class="col-sm-16">
<!-- Simple Message Field -->
<div class="comment-list styled clearfix">
    <ol>
    </ol>
</div>
<script type="text/javascript">
var list = $("ol");
for (var i=1; i<11;i++){
    var b=` <li class="comment"> 
            <div class="comment-body boxed" > 
                <div class="comment-arrow"></div> 
                <div class="comment-avatar"> 
                    <div class="avatar"><img src="https://bihu2001.oss-cn-shanghai.aliyuncs.com/${data[i].userIcon}?x-oss-process=style/size_head" alt="" height="80" width="80" /></div> 
                </div> 
                <div class="comment-text"> 
                    <div class="comment-author clearfix"> 
                        <a href="#" class="link-author">${data[i].userName}</a> 
                		<div class="ribbon" style="float:right;"><span><em>Rank</em><strong>${i}</strong></span></div>
                    </div> 
                    <div class="comment-entry"> 
                    ${data[i].ups} 赞 
                    </div> 


            </div>

                </div> 
                <div class="clear"></div> 
            </div>  
        </li> 
`;
	list.append(b);
}

</script>
<style type="text/css">
.comment-list li.comment {
    position: relative;
    margin-bottom: 5px;
}
</style>
</body>
